import React, { Component } from 'react'
//导入css
import '../assets/css/GoodsDetail.css'
import qs from 'qs'
import Header from "../components/DefaultHeader"

export default class GoodsDetail extends Component {
    state = {
        goods_id: '',
        detail_good: {}
    }
    //访问接口，请求数据
    get_goods(goods_id) {
        this.$axios.get('/getgoodsinfo?id=' + goods_id).then((res) => {
            this.setState({ detail_good: res.list[0] })


        })
    }
    UNSAFE_componentWillMount() {
        const { id } = qs.parse(this.props.location.search.substring(1))
        this.setState({ goods_id: id })
        //调用请求的数据
        this.get_goods(id)

        // console.log(id);
    }
    render() {
        const { detail_good } = this.state
        return (
            <div id='goods_detail'>
                <div className="goods-container">
                    {/* <div className="page-title">商品详情</div> */}
                    <Header title='商品详情'/>
                    {
                        <div className="detail">
                            <img src={this.$static_host + detail_good.img} alt="" />
                            <div>
                                <h3 className="price">&yen;{detail_good.price}</h3>
                                <p>{detail_good.goodsname}</p>
                            </div>
                        </div>
                    }
                    {/* 底部导航  */}
                    <ul className="cartbar">
                        <li>
                            <div className="icon icon-concat">客服</div>
                        </li>
                        <li>
                            <div className="icon icon-shop">店铺</div>
                        </li>
                        <li>
                            <div className="icon icon-cart">购物车</div>
                        </li>
                        <li className="btn-cart">
                            加入购物车
                        </li>
                        <li className="btn-buy">
                            立即购买
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
